<template>
  <div class="app-container">
    <HkSearchform
      :data="searchFormObj.searchData"
      :field-list="searchFormObj.fieldList"
      :listTypeInfo="searchFormObj.listTypeInfo"
      @handleSearch="handleQuery"
      @handleReset="handleReset">
    </HkSearchform>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:dict:add']"
          >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:dict:edit']"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:dict:remove']"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:dict:export']"
          >导出
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button icon="el-icon-refresh" size="mini" @click="handleRefreshCache" v-hasPermi="['system:dict:remove']">
          刷新缓存</el-button
        >
      </el-col>
    </el-row>
    <HkTable
      :tableData="typeList"
      :tableColumns="qualtableLabel"
      :showIndex="true"
      :operate="true"
      :total="total"
      :selection="true"
      :table-height="80"
      @changePage="getList"
      :queryParams="queryParams"
      @handleSelectionChange="handleSelectionChange">
      <template #status="scope">
        <span class="Inspan" :class="scope.row.status == 0 ? 'simple' : 'serious'">
          {{ scope.row.status == 0 ? '正常' : scope.row.status == -1 ? '删除' : '停用' }}
        </span>
      </template>
      <template #operate="scope">
        <el-button @click="handleUpdate(scope.row)" type="text">修改</el-button>
        <el-button @click="handleDelete(scope.row)" type="text">删除</el-button>
      </template>

      <template #dictType="scope">
        <el-button type="text" @click="$router.push('/system/dict-data?dictId=' + scope.row.id)"
          >{{ scope.row.dictType }}
        </el-button>
      </template>
    </HkTable>

    <addDialog ref="add_dia" :title="title" :transForm="form" @submitForm="getList" />
  </div>
</template>

<script>
import { listType, delType, getType, refreshCache } from '@/api/system/dict/type'
import HkSearchform from '@/components/HKSearchform/index.vue'
import HkTable from '@/components/HKTable/index.vue'
import addDialog from './coms/addDialog.vue'

export default {
  name: 'Dict',
  dicts: ['dict_status'],
  components: { HkSearchform, HkTable, addDialog },
  data() {
    return {
      form: {},
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
      },

      // 查询的数据
      qualtableLabel: [
        { label: '字典名称', param: 'dictName' },
        { label: '字典类型', param: 'dictType', type: 'slot' },
        { label: '状态', param: 'status', type: 'slot' },
        { label: '创建时间', param: 'createTime' },
      ],
      // 搜索的数据
      searchForm: [],
      //   搜索数据类型
      searchFormObj: {
        fieldList: [
          {
            label: '字典名称',
            type: 'input',
            field: 'dictName',
          },
          {
            label: '字典类型',
            type: 'input',
            field: 'dictType',
          },
          {
            label: '状态',
            type: 'select',
            field: 'status',
            list: 'statusBoxList',
          },
          {
            label: '创建时间',
            type: 'dateRange',
            field: 'timetBox',
          },
        ],
        searchData: {},
        btnHidden: true,
        listTypeInfo: {
          statusBoxList: [
            { label: '正常', value: '0' },
            { label: '停用', value: '1' },
          ],
        },
        //  是否有额外的参数
        isNeedResetExtraParam: false,
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 选中的字典类型
      dictType: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      total: 0,
      // 字典表格数据
      typeList: [],
      // 弹出层标题
      title: '',
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 重置按钮
    handleReset() {
      this.queryParams = {}
      this.getList()
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      this.dictType = selection.map((item) => item.dictType)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    /** 查询字典类型列表 */
    getList(val) {
      this.loading = true
      this.queryParams = { ...this.queryParams, ...val, ...this.searchForm }

      listType(this.queryParams).then((response) => {
        this.typeList = response.list
        this.total = response.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery(data) {
      if (data.timetBox) {
        data.endTime = data.timetBox[1]
        data.startTime = data.timetBox[0]
      }
      this.searchForm = data
      this.queryParams.current = 1
      this.getList()
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.form = {
        dictId: undefined,
        dictName: undefined,
        dictType: undefined,
        status: 0,
        remark: undefined,
      }

      this.$refs.add_dia.open = true
      this.title = '添加字典类型'
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      let dictId = row.id || this.ids
      getType(dictId).then((response) => {
        this.form = response

        this.$refs.add_dia.open = true
        this.title = '修改字典类型'
      })
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      const dictType = row.dictType || this.dictType
      this.$modal
        .confirm('是否确认删除字典类型为"' + dictType + '"的数据项？')
        .then(function () {
          return delType(ids)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        window.baseUrl+'/system/dictType/export',
        {
          ...this.queryParams,
        },
        `type_${new Date().getTime()}.xlsx`
      )
    },
    /** 刷新缓存按钮操作 */
    handleRefreshCache() {
      refreshCache().then(() => {
        this.$modal.msgSuccess('刷新成功')
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
  .targetTable {
    flex: 1;
  }
}

</style>
